<!--
 * @Descripttion: 供应商注册
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-21 10:38
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-19 16:04:29
-->
<template>
	<div class="supplier-register">
		<!-- <el-dialog :visible='dialogVisible2' title="温馨提示" :show-close="false">
			<div class="introduce">
				<p class="content">尊敬的客户您好，您的账户已创建完毕。</p>
				<div style="width: 100%;height:1px;background: #ccc;margin: 20px auto;"></div>
				<p class="title">供应商注册流程</p>
				<p class="content">用户自行注册->注册完成登录平台->点击首页右上方工作台->进入后台管理->点击资质申请->供应商申请->输入您所在单位名称</p>
				<p class="content">如果有您的单位名称，会提示您此供应商已注册，请联系平台客服帮您加入该供应商。</p>
				<p class="content">如果没有您的单位名称，您需要输入完整信息，并提交至平台进行审核。审核通过后您就成为平台的供应商了。如果审核未通过需要您重新完善信息，再次提交。</p>
			</div>
			<el-button @click="closeIt" type="primary"
				style="margin-top: 30px;float: right;margin-right:20px;">关闭</el-button>
		</el-dialog> -->
		<!-- <div v-if="auditStatus==2"> -->
		<div>
			<p v-if="this.orgList && this.orgList.length > 0 && this.orgList[0].refuseDetail">拒绝原因：{{this.orgList[0].refuseDetail}}</p>
			<!-- jujue 修改 -->
			<el-form ref="form" :model="form" :rules="rules" label-width="180px" @submit.native.prevent>
				<el-row>
					<el-col :span="18">
						<el-form-item label="单位名称" style="margin-bottom: 5px" prop="orgNameZh">
							<el-input placeholder="请输入" v-model="form.orgNameZh">
								<template slot="append">
									<el-button @click="queryOrg">查询组织</el-button>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="org-msg">
					<p v-if="orgList.length<=0"></p>
					<p v-else>不存在此供应商,请填写详细信息，并提交创建</p>
				</el-row>
				<template>
					<el-row>
						<el-col :span="12">
							<el-form-item label="营业执照编码" prop="businessLicenseCode">
								<el-input placeholder="请输入" v-model="form.businessLicenseCode"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="国别代码">
								<el-select v-model="form.countryCode" filterable placeholder="请选择">
									<el-option v-for="item in nationArr" :key="item.publicCode"
										:label="item.publicCodeName" :value="item.publicCodeName"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="中文简称" prop="orgNameZhShort">
								<el-input placeholder="请输入" v-model="form.orgNameZhShort"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="成立日期" prop="foundationDate">
								<el-date-picker v-model="form.foundationDate" type="date" value-format="yyyy-MM-dd"
									placeholder="选择日期"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="营业地址">
								<el-input placeholder="请输入" v-model="form.addr"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="邮政编码" prop="zipCode">
								<el-input placeholder="请输入" v-model="form.zipCode"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系人手机号" prop="contactTel">
								<el-input placeholder="请输入" v-model="form.contactTel"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="传真号码" prop="fax">
								<el-input placeholder="请输入" v-model="form.fax"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="电子邮箱" prop="mail">
								<el-input placeholder="请输入" v-model="form.mail"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="网址">
								<el-input placeholder="请输入" v-model="form.website"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="法人代表" prop="legalPerson">
								<el-input placeholder="请输入" v-model="form.legalPerson"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="法人代表身份证/护照编码" prop="legalPersonId">
								<el-input placeholder="请输入" v-model="form.legalPersonId"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="注册资本" prop="registeredCapital">
								<el-input placeholder="请输入" v-model="form.registeredCapital"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="注册地址" prop="registeredAddr">
								<el-input placeholder="请输入" v-model="form.registeredAddr"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="营业开始时间" prop="openStart">
								<el-date-picker v-model="form.openStart" type="date" placeholder="选择日期"
									value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="营业结束时间" prop="openEnd">
								<el-date-picker v-model="form.openEnd" type="date" placeholder="选择日期"
									value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开户行" prop="bankName">
								<el-input placeholder="请输入" v-model="form.bankName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开户行账号" prop="bankAccount">
								<el-input placeholder="请输入" v-model="form.bankAccount"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系人姓名" prop="contact">
								<el-input placeholder="请输入" v-model="form.contact"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<!-- --{{form}}== -->
						<el-form-item label="营业执照图片上传" prop="businessLicensePic">
							<div class="set-flex">
								<el-upload :action=fileUrl :data="{ fileType: 18}" :on-preview="handlePreview"
									:on-remove="(file, fileList)=>handleRemove(file, fileList,0)"
									:on-success="(res, file,fileList)=>handleAvatarSuccess(res, file,fileList,0)"
									:on-error="handleAvatarError" :before-upload="beforeAvatarUpload"
									:headers=fileHeaders multiple :limit="1" :on-exceed="handleExceed"
									accept=".jpg,.png,.jpeg,.gif" :file-list="permitFileList">
									<el-button size="small" type="primary">选择附件</el-button>
								</el-upload>
								<p class="tips">可上传1张</p>
							</div>
							<el-input style="display: none;" v-model="form.businessLicensePic"></el-input>
						</el-form-item>
						<img :src="form.businessLicensePic"
							v-if="form.businessLicensePic && form.businessLicensePic.indexOf('www.ansteelmro.com') > -1" />
						<img :src="'http://www.ansteelmro.com' + form.businessLicensePic" v-else />
					</el-row>
					<!-- <el-row>
						<el-form-item label="其他图片上传" prop="attachment2">
							<div class="set-flex">
								<el-upload :action=fileUrl :data="{ fileType: 18}" :on-preview="handlePreview"
									:on-remove="(file, fileList)=>handleRemove(file, fileList,1)"
									:on-success="(res, file,fileList)=>handleAvatarSuccess(res, file,fileList,1)"
									:on-error="handleAvatarError" :before-upload="beforeAvatarUpload"
									:headers=fileHeaders multiple :limit="1" :on-exceed="handleExceed"
									accept=".jpg,.png,.jpeg,.gif"
									:file-list="otherFileList">
									<el-button size="small" type="primary">选择附件</el-button>
								</el-upload>
								<p class="tips">可上传1张</p>
							</div>
							<el-input style="display: none;" v-model="form.attachment2"></el-input>
						</el-form-item>
					</el-row> -->
					<!-- <el-row>
						<el-form-item label="其他图片上传">
							<div class="set-flex">
								<el-upload :action=fileUrl :data="{ fileType: 18}" :on-preview="handlePreview"
									:on-remove="(file, fileList)=>handleRemove(file, fileList,2)"
									:on-success="(res, file,fileList)=>handleAvatarSuccess(res, file,fileList,2)"
									:on-error="handleAvatarError" :before-upload="beforeAvatarUpload"
									:headers=fileHeaders multiple :limit="1" :on-exceed="handleExceed"
									accept=".jpg,.png,.jpeg,.gif"
									:file-list="otherFileList1">
									<el-button size="small" type="primary">选择附件</el-button>
								</el-upload>
								<p class="tips">可上传1张</p>
							</div>
						</el-form-item>
					</el-row> -->
					<el-row class="submit">
						<el-button type="primary" @click="onRegister">提交</el-button>
					</el-row>
				</template>
			</el-form>
		</div>
		<!-- <div v-else> -->
			<!-- Moren xianshi -->

		<!-- </div> -->

		<!-- 查看附件   -->
		<el-dialog :visible.sync='dialogVisible'>
			<img width='100%' :src='dialogImageUrl' alt='' />
		</el-dialog>
	</div>
</template>

<script>
	import {
		nation
	} from "@/assets/jsonDate/nation";
	import moment from "moment";
	import {
		searchSupplierOrg,
		regSupplier,
		searchSupplierRegistered,
		selectRefuseTSupplierList,
		joinSupplier
	} from "@/api/admin.api";
	import tools from "@/tools";
	import {
		deleteFile,
		getFileUrl
	} from '@/api/common.api'
	// 上传文件
	import {
		beforeUpload
	} from '@/util/common'
	// 上传文件
	import fileUpdata from '@/api/file.config'

	export default {
		inject: ['reload'], //注入刷新依赖
		name: "supplier-register",
		components: {},
		data() {
			// 传真号验证
			const validatFax = (rule, value, callback) => {
				if (!value) {
					return callback()
				}
				if (value) {
					const reg = /^(\d{3,4}-)?\d{7,8}$/
					if (!reg.test(value)) {
						return callback(new Error("传真号码 '区号-传真号码'"))
					} else {
						return callback()
					}
				}
			}
			// 电子邮箱验证
			const validatEmail = (rule, value, callback) => {
				if (!value) {
					return callback()
				}
				if (value) {
					const reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
					if (!reg.test(value)) {
						return callback(new Error('电子邮箱格式不正确'))
					} else {
						return callback()
					}
				}
			}
			// 验证邮政编码
			const validatZipCode = (rule, value, callback) => {
				if (!value) {
					return callback()
				}
				if (value) {
					const reg = /^[0-8][0-7]\d{4}$/
					if (!reg.test(value)) {
						return callback(new Error('邮政编码格式不正确'))
					} else {
						return callback()
					}
				}
			}
			return {
				form: {

					orgNameZh: "",
					businessLicenseCode: "",
					countryCode: "",
					orgNameZhShort: "",
					foundationDate: "",
					addr: "",
					zipCode: "",
					contactTel: "",
					fax: "",
					mail: "",
					website: "",
					legalPerson: "",
					legalPersonId: "",
					registeredCapital: "",
					registeredAddr: "",
					openStart: "",
					openEnd: "",
					bankName: "",
					bankAccount: "",
					contact: "",
					// 图片id
					attachment1: "",
					attachment2: "",
					attachment3: '',
					userId: tools.localRead("userId"),
					dialogVisible: false
				},
				dialogVisible2: false,
				// 审核状态信息
				supplierStatusArr: ['申请正在审核中，请耐心等待～', '审核已通过', '审核已拒绝'],
				rules: {
					businessLicenseCode: [{
						required: true,
						message: "请输入营业执照编码",
						trigger: "blur"
					}, ],
					orgNameZh: [{
						required: true,
						message: "请输入单位名称",
						trigger: "blur"
					}, ],
					orgNameZhShort: [{
							required: true,
							message: "请输入单位名称",
							trigger: "blur"
						},
						{
							min: 2,
							max: 10,
							message: '长度在 2 到 10 个字符',
							trigger: 'blur'
						}
					],
					contactTel: [{
							required: true,
							message: "请输入联系人手机号",
							trigger: "blur"
						},
						{
							pattern: /(^1(3|4|5|6|7|8|9)\d{9}$)/,
							message: '手机号格式不正确',
							trigger: 'blur'
						}
					],
					legalPerson: [{
						required: true,
						message: "请输入法人代表",
						trigger: "blur"
					}, ],
					legalPersonId: [{
						required: true,
						message: "请输入法人代表身份证/护照编码",
						trigger: "blur",
					}, ],
					registeredCapital: [{
						required: true,
						message: "请输入注册资本",
						trigger: "blur"
					}, ],
					registeredAddr: [{
						required: true,
						message: "请输入注册地址",
						trigger: "blur"
					}, ],
					openStart: [{
						required: true,
						message: "请输入营业开始时间",
						trigger: "blur"
					}, ],
					openEnd: [{
						required: true,
						message: "请输入营业开始时间",
						trigger: "blur"
					}, ],
					foundationDate: [{
						required: true,
						message: "请输入成立日期",
						trigger: "blur"
					}, ],
					bankName: [{
						required: true,
						message: "请输入开户行",
						trigger: "blur"
					}, ],
					bankAccount: [{
						required: true,
						message: "请输入开户行账号",
						trigger: "blur"
					}, ],
					contact: [{
						required: true,
						message: "请输入联系人姓名",
						trigger: "blur"
					}, ],
					// businessLicensePic: [{
					// 	required: true,
					// 	message: "请上传营业执照图片",
					// 	trigger: "change"
					// }, ],
					fax: [{
						validator: validatFax,
						trigger: 'blur'
					}],
					mail: [{
						validator: validatEmail,
						trigger: 'blur'
					}],
					zipCode: [{
						validator: validatZipCode,
						trigger: 'blur'
					}]
					// attachment2: [
					//   { required: true, message: "请上传其他资源", trigger: "change" },
					// ]
				},
				// 开始时间
				pickerOptionsStart: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
				// 结束时间快捷方式
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					},
					shortcuts: [{
						text: '无限期',
						onClick(picker) {
							picker.$emit('pick', new Date('2099/12/31 23:59:59'));
						}
					}],
				},
				// 是否显示注册表单
				showForm: false,
				// 国别
				nationArr: nation,
				// 附件
				fileHeaders: fileUpdata.headers(),
				fileUrl: fileUpdata.url,
				dialogVisible: false,
				dialogImageUrl: '',
				permitFileList: [],
				otherFileList: [],
				otherFileList1: [],
				// 基本信息
				formInfor: '',
				auditStatus: '',
				orgList: []
			};
		},
		watch: {},
		computed: {},
		filters: {
			formeTime(val) {
				return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
			}
		},
		created() {
			this.searchRegistered();
		},
		mounted() {

		},
		methods: {
			closeIt() {
				this.dialogVisible2 = false;
			},
			/**
			 * @description 注册-供应商
			 * @author 穆宏宇
			 * @date 2020-09-21 10:43:02
			 * @param
			 * @return
			 * */
			onRegister() {
				var that = this;
				if (that.form.openEnd) {
					that.form.openEnd = that.form.openEnd.replace("T", "Z")
				}
				if (that.form.openStart) {
					that.form.openStart = that.form.openStart.replace("T", "Z")
				}
				this.$refs["form"].validate((valid) => {
					if (valid) {
						regSupplier(that.form)
							.then((res) => {
								that.$alert('提交成功！', '提示', {
									confirmButtonText: '确定',
									type: 'success',
									callback: action => {
										// this.searchRegistered();
										that.reload()
									}
								})
							})
							.catch((err) => {});
					}
				});
			},
			// 查询是否注册过
			searchRegistered() {
				var that = this;
				const id = this.$tools.localRead('userId')

				selectRefuseTSupplierList({
					userId: id
				}).then(res => {
					if (res && res.length > 0) {
						that.orgList = res;
						that.form = res[0];
						var auditStatus = res[0].auditStatus;
						that.auditStatus = auditStatus;
						that.permitFileList = [res[0].businessLicensePic];
						// that.form.attachment1 = res[0].businessLicensePic;
						that.form.businessLicensePic = res[0].businessLicensePic;
						this.$forceUpdate()
						// that.otherFileList = [res[0].businessLicensePic];
						// that.form.attachment1 = [res[0].businessLicensePic];

						// that.otherFileList1 = [res[0].businessLicensePic];
						// that.form.attachment1 = [res[0].businessLicensePic];

					}

				})

			},
			// 查询组织注册信息
			// 查询组织
			queryOrg() {
				var that = this;
				if (that.form.orgNameZh) {
					searchSupplierOrg({
							name: that.form.orgNameZh
						}).then((res) => {
							if (res.length <= 0) {
								//没有注册过
								that.showForm = true;
							} else {
								//注册过
								that.$alert('此供应商已注册，请联系供应商管理员加入该供应商。', '提示', {
									confirmButtonText: '确定'
								})
							}

						})
						.catch((err) => {
							if (err.code == -2) {
								this.showForm = true;
							}
						});
				} else {
					// this.$message.error("请输入先组织机构!");
				}
			},
			// 加入组织
			joinSupplierFn() {
				joinSupplier({
					userId: this.$tools.localRead('userId')
				}).then(res => {
					this.$alert('提交成功！', '提示', {
						confirmButtonText: '确定'
					})
				})
			},
			// 预览附件
			handlePreview(file) {
				getFileUrl(file.fileType, file.id).then(res => {
					this.dialogImageUrl = res
					this.dialogVisible = true
				})
			},
			// 删除附件
			handleRemove(file, fileList, type) {
				console.log('删除')
				if (file && file.status === "success") {
					const arr = [{
							fileList: this.permitFileList,
							fileId: 'attachment1'
						},
						{
							fileList: this.otherFileList,
							fileId: 'attachment2'
						},
						{
							fileList: this.otherFileList1,
							fileId: 'attachment3'
						}
					]
					arr[type].fileList = fileList
					const key = arr[type].fileId
					this.form[key] = ''
				}
			},
			handleExceed(files, fileList) {
				this.$message.warning(`最多可上传 1 个附件，您已超限`)
			},
			handleAvatarSuccess(res, file, fileList, type) {
				var that = this;
				that.form.businessLicensePic = res.data
				// that.form.attachment1 = res.data
			},
			handleAvatarError(res, file) {
				this.$message.error("文件上传失败，请重试")
			},
			beforeAvatarUpload(file) {
				//const isJPG = file.type === 'image/jpeg';
				const typeList = ['png', 'jpg', 'jpeg']
				const isJPG = beforeUpload(file, typeList)
				const isLt5M = file.size / 1024 / 1024 < 5
				if (!isJPG) {
					this.$message.error('上传文件格式不符合!')
				}
				if (!isLt5M) {
					this.$message.error('上传身份证图片大小不能超过 5MB!')
				}
				return isJPG && isLt5M
			},
		},
	};
</script>

<style scoped lang="scss">
	.supplier-register {
		padding: 20px 60px;
		background: #fff;
		height: calc(100vh - 90px);
		overflow-y: scroll;

		// height: 100%;
		.el-select,
		.el-input {
			width: 100%;
		}

		// 提示消息
		.org-msg {
			font-size: 12px;
			padding: 20px 180px;
			color: $--color-danger;
		}

		// 提示文字
		.tips {
			font-size: 12px;
			padding-left: 20px;
			color: $--color-danger;
		}

		// 提交按钮
		.submit {
			margin-top: 20px;
			text-align: center;

			.el-button {
				padding: 12px 40px;
			}
		}

		// 内容
		.infor {
			max-width: 1000px;
			margin: 0 auto;
		}

		// 显示详情title
		.infor-title {
			font-size: 18px;
			padding: 20px;
			font-weight: bold;
		}

		.preview {
			width: 80px;
			height: 80px;
			cursor: pointer;
		}
	}

	.introduce {
		width: 700px;
		margin: 0 auto;
	}

	.title {
		text-align: center;
		font-weight: bold;
		font-size: 20px;
	}

	.content {
		margin-top: 20px;
		font-size: 16px;
		text-indent: 2em;
		line-height: 30px;
	}

	.center {
		text-align: center;
	}
</style>